import React, {useState} from "react";
import {Button, ColorPicker, Space} from "antd";

const Grand = () => {
    return (
        <div>
            <h1>GrandComponent</h1>
        </div>
    );
};

// 函数组件每次的渲染，都是把函数体的代码执行一遍，产生一个全新的私有上下文
const App = () => {
    const [count, setCount] = useState(0);
    const [selectColor, setSelectColor] = useState("");
    const increment = () => {
        setCount(count + 1);
    };
    const selectColorChange = (defaultValue, css) => {
        console.log(css);
        setSelectColor(css);
    };
    return (
        <div>
            <h1>2222</h1>
            <h1>Count: {count}</h1>
            {/* <button onClick={increment}>Increment</button>
       */}
            <Button></Button>
            <Button type="primary" onClick={increment}>
                Increment
            </Button>
            {/* 颜色选折器 */}
            <Space>
                <ColorPicker defaultValue={selectColor} onChange={selectColorChange}/>
            </Space>
            <ColorPicker></ColorPicker>
        </div>
    );
};
export default App;
